<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>键盘事件</title>
</head>
<body>
    <!-- 
        1.Vue中常用的按键别名：
            回车 =》enter
            删除 =》delete（捕获“删除”和”退格“键）
            退出 =》esc
            空格 =》 space
            换行 =》tab （特殊，必须配合keydown去使用）
            上 =》up
            下 =》 down
            左 =》left
            右 =》right
        2.Vue未提供别名的按键，可以使用按键原始key值去绑定，但注意要转为kebab-case(短横线命名)
        3.系统修饰键（用法特殊):ctrl、alt、shift、meta
            (1). 配置keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
            (2). 配置keydown使用：正常触发事件
        4.也可以使用keyCode去指定具体的按键（不推荐）
        5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
     -->
    <div id="root">
        <h2>第{{chapter}}节 - 键盘提示事件</h2>
        <!-- 方式二： -->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">

    </div>

    <script type="text/javascript">
        //自定义键盘 别名 键码
        Vue.config.keyCodes.huiche = 13
        const vm = new Vue({
            el:"#root",
            data(){
                return {
                    chapter: 7,
                }
            },
            methods:{
                showInfo(e){
                    //需求按下回车键后，控制台打印输入值：
                    // //方式一： 回车的按键编码为13
                    // if(e.keyCode !== 13) return
                   console.log(e.target.value)     
                }
            }
        })
    </script>
</body>
</html>